<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>随笔| web资料整合 | 一只咸鱼 | 努力学习最新姿势！！！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="web">
    <meta name="description" content="一. 知识体系:   综合类前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript（JS 教程） 麻省理工学院公开课：计算机科学及编程导论 Java">
<meta property="og:type" content="article">
<meta property="og:title" content="随笔| web资料整合">
<meta property="og:url" content="http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/index.html">
<meta property="og:site_name" content="一只咸鱼">
<meta property="og:description" content="一. 知识体系:   综合类前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript（JS 教程） 麻省理工学院公开课：计算机科学及编程导论 Java">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.nlark.com/yuque/627/2019/gif/159808/1547187634470-5e8dbd20-67b4-4da5-94a9-b9e2650269c1.gif">
<meta property="og:image" content="https://cdn.nlark.com/yuque/627/2019/gif/159808/1547187634417-99a90ebd-2fca-4b78-bdc2-2c650b6f51a6.gif">
<meta property="article:published_time" content="2020-04-30T12:03:00.000Z">
<meta property="article:modified_time" content="2020-04-30T12:12:23.825Z">
<meta property="article:author" content="Mr.Zhang">
<meta property="article:tag" content="web">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.nlark.com/yuque/627/2019/gif/159808/1547187634470-5e8dbd20-67b4-4da5-94a9-b9e2650269c1.gif">
    
        <link rel="alternate" type="application/atom+xml" title="一只咸鱼" href="/atom.xml">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

<meta name="generator" content="Hexo 4.2.0"></head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Mr.Zhang</h5>
          <a href="mailto:zhangticcc@163.com" title="zhangticcc@163.com" class="mail">zhangticcc@163.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                首页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                时间轴
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                分类
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://weibo.com/u/5392412243" target="_blank" >
                <i class="icon icon-lg icon-weibo"></i>
                微博
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/zhangti0708" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                开源地址
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://blog.csdn.net/weixin_40902527" target="_blank" >
                <i class="icon icon-lg icon-rss"></i>
                技术博客
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="http://zhangticcc.gitee.io/webgis/" target="_blank" >
                <i class="icon icon-lg icon-globe"></i>
                GIS案例
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://mp.weixin.qq.com/s/p4TOhKcr4RZkZWzuMYyBEQ" target="_blank" >
                <i class="icon icon-lg icon-weixin"></i>
                微信订阅号
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">随笔| web资料整合</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">随笔| web资料整合</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-04-30T12:03:00.000Z" itemprop="datePublished" class="page-time">
  2020-04-30
</time>


	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/%E9%9A%8F%E7%AC%94/">随笔</a></li></ul>

            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#95630094"><span class="post-toc-number">1.</span> <span class="post-toc-text">一. 知识体系:</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#c569da14"><span class="post-toc-number">2.</span> <span class="post-toc-text">二. API:</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#57e93384"><span class="post-toc-number">3.</span> <span class="post-toc-text">三. 开发规范</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#88f7226d"><span class="post-toc-number">4.</span> <span class="post-toc-text">四. 其它收集</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#b7509502"><span class="post-toc-number">5.</span> <span class="post-toc-text">五. Nodejs</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#edefdcb8"><span class="post-toc-number">6.</span> <span class="post-toc-text">六. 性能优化</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#6639966e"><span class="post-toc-number">7.</span> <span class="post-toc-text">七. 前端架构</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#08d581d7"><span class="post-toc-number">8.</span> <span class="post-toc-text">八. iconfont</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#c49550d7"><span class="post-toc-number">9.</span> <span class="post-toc-text">九. 开发工具类</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#3cd371cc"><span class="post-toc-number">10.</span> <span class="post-toc-text">十. 前端导航网站</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#b67fbcb9"><span class="post-toc-number">11.</span> <span class="post-toc-text">十一. 常用CDN</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#114d516f"><span class="post-toc-number">12.</span> <span class="post-toc-text">十二. Git,SVN,Github</span></a></li></ol>
        </nav>
    </aside>


<article id="post-随笔-资料整合"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">随笔| web资料整合</h1>
        <div class="post-meta">
            <time class="post-time" title="2020-04-30 20:03:00" datetime="2020-04-30T12:03:00.000Z"  itemprop="datePublished">2020-04-30</time>

            
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/%E9%9A%8F%E7%AC%94/">随笔</a></li></ul>



            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <div id="cnblogs_post_body" class="blogpost-body ">
    <h3 id="95630094">一. 知识体系:</h3>
<ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.cnblogs.com/sb19871023/p/3894452.html" rel="noopener noreferrer" target="_blank">综合类前端知识体系</a></li>
<li><a href="https://github.com/JacksonTian/fks" rel="noopener noreferrer" target="_blank">前端知识结构</a></li>
<li><a href="https://github.com/unruledboy/WebFrontEndStack" rel="noopener noreferrer" target="_blank">Web前端开发大系概览</a></li>
<li><a href="http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html" rel="noopener noreferrer" target="_blank">Web前端开发大系概览-中文版</a></li>
<li><a href="https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png" rel="noopener noreferrer" target="_blank">Web Front-end Stack v2.2</a></li>
<li><a href="https://github.com/justjavac/free-programming-books-zh_CN" rel="noopener noreferrer" target="_blank">免费的编程中文书籍索引</a></li>
<li><a href="https://github.com/dypsilon/frontend-dev-bookmarks" rel="noopener noreferrer" target="_blank">前端书籍</a></li>
<li><a href="https://github.com/vhf/free-programming-books" rel="noopener noreferrer" target="_blank">前端免费书籍大全</a></li>
<li><a href="http://www.cnblogs.com/sb19871023/p/3894452.html" rel="noopener noreferrer" target="_blank">前端知识体系</a></li>
<li><a href="https://github.com/justjavac/free-programming-books-zh_CN" rel="noopener noreferrer" target="_blank">免费的编程中文书籍索引</a></li>
<li><a href="http://study.163.com/course/introduction/224014.htm" rel="noopener noreferrer" target="_blank">智能社 - 精通JavaScript开发</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript" rel="noopener noreferrer" target="_blank">重新介绍 JavaScript（JS 教程）</a></li>
<li><a href="http://v.163.com/special/opencourse/bianchengdaolun.html" rel="noopener noreferrer" target="_blank">麻省理工学院公开课：计算机科学及编程导论</a></li>
<li><a href="http://segmentfault.com/a/1190000002640298" rel="noopener noreferrer" target="_blank">JavaScript中的this陷阱的最全收集--没有之一</a></li>
<li><a href="http://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html" rel="noopener noreferrer" target="_blank">JS函数式编程指南</a></li>
<li><a href="http://liubin.github.io/promises-book/" rel="noopener noreferrer" target="_blank">JavaScript Promise迷你书（中文版）</a></li>
<li><a href="https://github.com/AlloyTeam/Mars" rel="noopener noreferrer" target="_blank">腾讯移动Web前端知识库</a></li>
<li><a href="https://github.com/w3crange/Front-End-Develop-Guide" rel="noopener noreferrer" target="_blank">Front-End-Develop-Guide 前端开发指南</a></li>
<li><a href="https://li-xinyang.gitbooks.io/frontend-notebook/content/" rel="noopener noreferrer" target="_blank">前端开发笔记本</a></li>
<li><a href="https://github.com/nieweidong/fetool" rel="noopener noreferrer" target="_blank">大前端工具集 - 聂微东</a></li>
<li><a href="https://dwqs.gitbooks.io/frontenddevhandbook/content/" rel="noopener noreferrer" target="_blank">前端开发者手册</a></li>
</ol></li>
</ol><ol>
<li>入门类</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.cnblogs.com/jikey/p/3613082.html" rel="noopener noreferrer" target="_blank">前端入门教程</a></li>
<li><a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000" rel="noopener noreferrer" target="_blank">瘳雪峰的Javascript教程</a></li>
<li><a href="http://www.imooc.com/view/11" rel="noopener noreferrer" target="_blank">jQuery基础教程</a></li>
<li><a href="http://www.imooc.com/view/506" rel="noopener noreferrer" target="_blank">前端工程师必备的PS技能——切图篇</a></li>
<li><a href="https://github.com/qiu-deqing/FE-learning" rel="noopener noreferrer" target="_blank">结合个人经历总结的前端入门方法</a></li>
</ol></li>
</ol><ol start="2">
<li>效果类</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.imooc.com/learn/58" rel="noopener noreferrer" target="_blank">弹出层</a></li>
<li><a href="http://www.imooc.com/learn/18" rel="noopener noreferrer" target="_blank">焦点图轮播特效</a></li>
</ol></li>
</ol><ol start="3">
<li>工具类</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.imooc.com/learn/93" rel="noopener noreferrer" target="_blank">css sprite 雪碧图制作</a></li>
<li><a href="http://www.imooc.com/learn/390" rel="noopener noreferrer" target="_blank">版本控制入门 – 搬进 Github</a></li>
<li><a href="http://www.imooc.com/learn/30" rel="noopener noreferrer" target="_blank">Grunt-beginner前端自动化工具</a></li>
</ol></li>
</ol><ol start="4">
<li>慕课专题</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.imooc.com/space/teacher/id/197450" rel="noopener noreferrer" target="_blank">张鑫旭 - 慕课系列</a></li>
<li><a href="http://www.imooc.com/space/teacher/id/104593" rel="noopener noreferrer" target="_blank">lyn - 慕课系列</a></li>
<li><a href="http://www.imooc.com/space/teacher/id/290139" rel="noopener noreferrer" target="_blank">艾伦 - 慕课系列</a></li>
<li><a href="http://www.imooc.com/view/494" rel="noopener noreferrer" target="_blank">碧仔 - Hello，移动WEB</a></li>
</ol></li>
</ol><ol start="5">
<li>周刊类</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://fex.baidu.com/weekly/" rel="noopener noreferrer" target="_blank">百度FEX技术周刊</a></li>
<li><a href="https://github.com/PaicHyperionDev/MobileDevWeekly" rel="noopener noreferrer" target="_blank">平安科技移动开发二队技术周报</a></li>
<li><a href="http://www.75team.com/weekly/" rel="noopener noreferrer" target="_blank">360奇舞周刊</a></li>
</ol></li>
</ol>
<p><span data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F627%2F2019%2Fgif%2F159808%2F1547187634470-5e8dbd20-67b4-4da5-94a9-b9e2650269c1.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A1%2C%22height%22%3A1%7D"><span data-card-element="body"><span data-card-element="center"><span class="lake-image"><span class="lake-image-content lake-image-content-isvalid"><span class="lake-image-detail" data-role="detail"><span class="lake-image-meta"><img class="image lake-drag-image" src="https://cdn.nlark.com/yuque/627/2019/gif/159808/1547187634470-5e8dbd20-67b4-4da5-94a9-b9e2650269c1.gif" alt="" data-role="image" data-raw-src=""><span data-card-type="inline" data-lake-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F627%2F2019%2Fgif%2F159808%2F1547187634417-99a90ebd-2fca-4b78-bdc2-2c650b6f51a6.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22width%22%3A1%2C%22height%22%3A1%7D"><span data-card-element="body"><span data-card-element="center"><span class="lake-image"><span class="lake-image-content lake-image-content-isvalid"><span class="lake-image-detail" data-role="detail"><span class="lake-image-meta"><img class="image lake-drag-image" title="image.gif" src="https://cdn.nlark.com/yuque/627/2019/gif/159808/1547187634417-99a90ebd-2fca-4b78-bdc2-2c650b6f51a6.gif" alt="image.gif" data-role="image" data-raw-src=""></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<h3 id="c569da14">二. API:</h3>
<p>1. 总目录</p>
<ol>
<li>开发中心</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" rel="noopener noreferrer" target="_blank">mozilla js参考</a></li>
<li><a href="http://developer.chrome.com/extensions/api_index.html" rel="noopener noreferrer" target="_blank">chrome开发中心（chrome的内核已转向blink）</a></li>
<li><a href="https://developer.apple.com/library/safari/navigation" rel="noopener noreferrer" target="_blank">safari开发中心</a></li>
<li><a href="http://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx" rel="noopener noreferrer" target="_blank">microsoft js参考</a></li>
<li><a href="http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html" rel="noopener noreferrer" target="_blank">js秘密花园</a></li>
<li><a href="http://bonsaiden.github.io/JavaScript-Garden/zh/" rel="noopener noreferrer" target="_blank">js秘密花园</a></li>
<li><a href="http://www.w3help.org/" rel="noopener noreferrer" target="_blank">w3help</a>&nbsp;综合Bug集合网站</li>
</ol></li>
</ol><ol start="2">
<li>综合搜索</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.javascripting.com/" rel="noopener noreferrer" target="_blank">javascripting</a></li>
<li><a href="http://microjs.com/" rel="noopener noreferrer" target="_blank">各种流行库搜索</a></li>
</ol></li>
</ol><ol start="3">
<li>综合API</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.runoob.com/" rel="noopener noreferrer" target="_blank">runoob.com-包含各种API集合</a></li>
<li><a href="http://tool.oschina.net/apidocs" rel="noopener noreferrer" target="_blank">开源中国在线API文档合集</a></li>
<li><a href="http://devdocs.io/" rel="noopener noreferrer" target="_blank">devdocs</a>&nbsp;英文综合API网站</li>
</ol></li>
</ol>
<p>2. jQuery</p>
<ul>
<li><a href="http://jquery.bootcss.com/" rel="noopener noreferrer" target="_blank">jQuery API 中文文档</a></li>
<li><a href="http://hemin.cn/jq/" rel="noopener noreferrer" target="_blank">hemin 在线版</a></li>
<li><a href="http://www.css88.com/jqapi-1.9/on/" rel="noopener noreferrer" target="_blank">css88 jq api</a></li>
<li><a href="http://www.css88.com/jquery-ui-api/" rel="noopener noreferrer" target="_blank">css88 jqui api</a></li>
<li><a href="http://learn.jquery.com/" rel="noopener noreferrer" target="_blank">学习jquery</a></li>
<li><a href="http://james.padolsey.com/jquery/" rel="noopener noreferrer" target="_blank">jquery 源码查找</a></li>
</ul>
<p>3. Ecmascript</p>
<ul>
<li><a href="https://leanpub.com/understandinges6/read" rel="noopener noreferrer" target="_blank">Understanding ECMAScript 6 - Nicholas C. Zakas</a></li>
<li><a href="https://leanpub.com/exploring-es6/read" rel="noopener noreferrer" target="_blank">exploring-es6</a></li>
<li><a href="https://github.com/es6-org/exploring-es6" rel="noopener noreferrer" target="_blank">exploring-es6翻译</a></li>
<li><a href="http://es6-org.github.io/exploring-es6/" rel="noopener noreferrer" target="_blank">exploring-es6翻译后预览</a></li>
<li><a href="http://es6.ruanyifeng.com/" rel="noopener noreferrer" target="_blank">阮一峰 es6</a></li>
<li><a href="http://javascript.ruanyifeng.com/" rel="noopener noreferrer" target="_blank">阮一峰 Javascript</a></li>
<li><a href="http://yanhaijing.com/es5/" rel="noopener noreferrer" target="_blank">ECMA-262，第 5 版</a></li>
<li><a href="http://es5.github.io/" rel="noopener noreferrer" target="_blank">es5</a></li>
</ul>
<p>4. Js template</p>
<ul>
<li><a href="http://garann.github.io/template-chooser/" rel="noopener noreferrer" target="_blank">template-chooser</a></li>
<li><a href="https://github.com/aui/artTemplate" rel="noopener noreferrer" target="_blank">artTemplate</a></li>
<li><a href="https://github.com/aui/tmodjs/blob/master/README.md" rel="noopener noreferrer" target="_blank">tomdjs</a></li>
<li><a href="http://juicer.name/docs/docs_zh_cn.html" rel="noopener noreferrer" target="_blank">淘宝模板juicer模板</a></li>
<li><a href="http://koen301.github.io/fxtpl/" rel="noopener noreferrer" target="_blank">Fxtpl v1.0 繁星前端模板引擎</a></li>
<li><a href="http://sentsin.com/layui/laytpl/" rel="noopener noreferrer" target="_blank">laytpl</a></li>
<li><a href="https://github.com/mozilla/nunjucks" rel="noopener noreferrer" target="_blank">mozilla - nunjucks</a></li>
<li><a href="https://github.com/PaulGuo/Juicer" rel="noopener noreferrer" target="_blank">Juicer</a></li>
<li><a href="http://akdubya.github.io/dustjs/" rel="noopener noreferrer" target="_blank">dustjs</a></li>
<li><a href="http://ecomfe.github.io/etpl/" rel="noopener noreferrer" target="_blank">etpl</a></li>
<li><a href="http://twitter.github.io/hogan.js/" rel="noopener noreferrer" target="_blank">twitter-tpl</a></li>
</ul>
<p>5. 弹出层</p>
<ul>
<li><a href="https://github.com/aui/artDialog" rel="noopener noreferrer" target="_blank">artDialog 最新版</a></li>
<li><a href="http://aui.github.io/artDialog/doc/index.html" rel="noopener noreferrer" target="_blank">artDialog 文档</a></li>
<li><a href="https://code.google.com/p/artdialog/downloads/list" rel="noopener noreferrer" target="_blank">google code 下载地址</a></li>
<li><a href="http://sentsin.com/jquery/layer/" rel="noopener noreferrer" target="_blank">贤心弹出层</a></li>
<li><a href="https://github.com/bh-lay/UI" rel="noopener noreferrer" target="_blank">响应式用户交互组件库</a></li>
<li><a href="http://t4t5.github.io/sweetalert/" rel="noopener noreferrer" target="_blank">sweetalert-有css3动画弹出层</a></li>
</ul>
<p>6. CSS</p>
<ul>
<li><a href="http://tympanus.net/codrops/css_reference/" rel="noopener noreferrer" target="_blank">CSS 语法参考</a></li>
<li><a href="http://isux.tencent.com/css3/index.html" rel="noopener noreferrer" target="_blank">CSS3动画手册</a></li>
<li><a href="http://isux.tencent.com/css3/tools.html" rel="noopener noreferrer" target="_blank">腾讯css3动画制作工具</a></li>
<li><a href="http://linxz.github.io/tianyizone/" rel="noopener noreferrer" target="_blank">志爷css小工具集合</a></li>
<li><a href="http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb" rel="noopener noreferrer" target="_blank">css3 js 移动大杂烩</a></li>
<li><a href="http://bouncejs.com/" rel="noopener noreferrer" target="_blank">bouncejs 触摸库</a></li>
<li><a href="http://fian.my.id/Waves/" rel="noopener noreferrer" target="_blank">css3 按钮动画</a></li>
<li><a href="http://daneden.github.io/animate.css/" rel="noopener noreferrer" target="_blank">animate.css</a></li>
<li><a href="http://www.alloyteam.com/2015/10/8536/" rel="noopener noreferrer" target="_blank">全局CSS的终结(狗带) [译]</a></li>
</ul>
<p>7. Angularjs</p>
<ul>
<li><a href="https://github.com/dolymood/AngularLearning" rel="noopener noreferrer" target="_blank">Angular.js 的一些学习资源</a></li>
<li><a href="http://angularjs.cn/" rel="noopener noreferrer" target="_blank">angularjs中文社区</a></li>
<li><a href="https://github.com/johnpapa/angular-styleguide" rel="noopener noreferrer" target="_blank">Angular Style Guide</a></li>
<li><a href="http://www.cnblogs.com/xuwenmin888/p/3739096.html" rel="noopener noreferrer" target="_blank">Angularjs源码学习</a></li>
<li><a href="http://www.ifeenan.com/?c=AngularJS" rel="noopener noreferrer" target="_blank">Angularjs源码学习</a></li>
<li><a href="http://angular-ui.github.io/bootstrap/" rel="noopener noreferrer" target="_blank">angular对bootstrap的封装</a></li>
<li><a href="http://cnodejs.org/topic/51404e0f069911196d2e3923" rel="noopener noreferrer" target="_blank">angularjs + nodejs</a></li>
<li><a href="http://www.cnblogs.com/lvdabao/tag/AngularJs/" rel="noopener noreferrer" target="_blank">吕大豹 Angularjs</a></li>
<li><a href="http://www.infoq.com/cn/news/2013/02/angular-web-app" rel="noopener noreferrer" target="_blank">AngularJS 最佳实践</a></li>
<li><a href="http://www.lovelucy.info/angularjs-best-practices.html" rel="noopener noreferrer" target="_blank">Angular的一些扩展指令</a></li>
<li><a href="https://github.com/Pasvaz/bindonce" rel="noopener noreferrer" target="_blank">Angular数据绑定原理</a></li>
<li><a href="https://github.com/angular-ui/" rel="noopener noreferrer" target="_blank">一些扩展Angular UI组件</a></li>
<li><a href="http://voidcanvas.com/emberjs-vs-angularjs-performance-testing/" rel="noopener noreferrer" target="_blank">Ember和AngularJS的性能测试</a></li>
<li><a href="http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html" rel="noopener noreferrer" target="_blank">带你走近AngularJS - 基本功能介绍</a></li>
<li><a href="http://angular.duapp.com/docs/guide" rel="noopener noreferrer" target="_blank">Angularjs开发指南</a></li>
<li><a href="http://www.cnblogs.com/amosli/p/3710648.html" rel="noopener noreferrer" target="_blank">Angularjs学习</a></li>
<li><a href="http://www.rainweb.cn/article/angularjs-jquery.html" rel="noopener noreferrer" target="_blank">不要带着jQuery的思维去学习AngularJS</a></li>
<li><a href="http://wangjiatao.diandian.com/?tag=angularjs" rel="noopener noreferrer" target="_blank">angularjs 学习笔记</a></li>
<li><a href="http://www.angularjs.cn/T008" rel="noopener noreferrer" target="_blank">angularjs 开发指南</a></li>
<li><a href="https://github.com/jmcunningham/AngularJS-Learning" rel="noopener noreferrer" target="_blank">angularjs 英文资料</a></li>
<li><a href="http://angular-ui.github.io/bootstrap/" rel="noopener noreferrer" target="_blank">angular bootstrap</a></li>
<li><a href="https://github.com/opitzconsulting/jquery-mobile-angular-adapter" rel="noopener noreferrer" target="_blank">angular jq mobile</a></li>
<li><a href="http://mgcrea.github.io/angular-strap/" rel="noopener noreferrer" target="_blank">angular ui</a></li>
<li><a href="http://www.tuicool.com/articles/7ZZVr2" rel="noopener noreferrer" target="_blank">整合jQuery Mobile+AngularJS经验谈</a></li>
<li><a href="http://blog.jobbole.com/46589/" rel="noopener noreferrer" target="_blank">有jQuery背景，该如何用AngularJS编程思想</a></li>
<li><a href="http://each.sinaapp.com/angular/" rel="noopener noreferrer" target="_blank">AngularJS在线教程</a></li>
<li><a href="http://www.zouyesheng.com/angular.html" rel="noopener noreferrer" target="_blank">angular学习笔记</a></li>
</ul>
<p>8. React</p>
<ul>
<li><a href="https://github.com/enaqx/awesome-react" rel="noopener noreferrer" target="_blank">react海量资源</a></li>
<li><a href="http://www.react-china.org/" rel="noopener noreferrer" target="_blank">react.js 中文论坛</a></li>
<li><a href="https://facebook.github.io/react/index.html" rel="noopener noreferrer" target="_blank">react.js 官方网址</a></li>
<li><a href="https://facebook.github.io/react/docs/getting-started.html" rel="noopener noreferrer" target="_blank">react.js 官方文档</a></li>
<li><a href="http://material-ui.com/#/" rel="noopener noreferrer" target="_blank">react.js material UI</a></li>
<li><a href="http://touchstonejs.io/" rel="noopener noreferrer" target="_blank">react.js TouchstoneJS UI</a></li>
<li><a href="http://amazeui.org/react/" rel="noopener noreferrer" target="_blank">react.js amazeui UI</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2015/03/react.html" rel="noopener noreferrer" target="_blank">React 入门实例教程 - 阮一峰</a></li>
<li><a href="http://wiki.jikexueyuan.com/project/react-native/" rel="noopener noreferrer" target="_blank">React Native 中文版</a></li>
<li><a href="http://www.html-js.com/article/Fakefish%203053" rel="noopener noreferrer" target="_blank">Webpack 和 React 小书 - 前端乱炖</a></li>
<li><a href="https://fakefish.github.io/react-webpack-cookbook/" rel="noopener noreferrer" target="_blank">Webpack 和 React 小书 - gitbook</a></li>
<li><a href="http://www.piliyu.com/" rel="noopener noreferrer" target="_blank">React原创实战视频教程</a></li>
<li><a href="https://hulufei.gitbooks.io/react-tutorial/content/index.html" rel="noopener noreferrer" target="_blank">React 入门教程</a></li>
<li><a href="https://github.com/zjzhome/react-webpack-starter" rel="noopener noreferrer" target="_blank">react-webpack-starter</a></li>
<li><a href="https://github.com/ant-design/ant-design" rel="noopener noreferrer" target="_blank">基于react组件化开发</a></li>
</ul>
<p>9. 移动端API</p>
<ol>
<li>API</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/jtyjty99999/mobileTech" rel="noopener noreferrer" target="_blank">99移动端知识集合</a></li>
<li><a href="https://github.com/AlloyTeam/Mars" rel="noopener noreferrer" target="_blank">移动端前端开发知识库</a></li>
<li><a href="http://caibaojian.com/mobile-web-bug.html" rel="noopener noreferrer" target="_blank">移动前端的一些坑和解决方法（外观表现）</a></li>
<li><a href="http://www.cnblogs.com/PeunZhang/p/3407453.html" rel="noopener noreferrer" target="_blank">【原】移动web资源整理</a></li>
<li><a href="http://mweb.baidu.com/zeptoapi/" rel="noopener noreferrer" target="_blank">zepto 1.0 中文手册</a></li>
<li><a href="http://www.html-5.cn/Manual/Zepto/" rel="noopener noreferrer" target="_blank">zepto 1.0 中文手册</a></li>
<li><a href="http://www.css88.com/doc/zeptojs_api/" rel="noopener noreferrer" target="_blank">zepto 1.1.2</a></li>
<li><a href="http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html" rel="noopener noreferrer" target="_blank">zepto 中文注释</a></li>
<li><a href="http://app-framework-software.intel.com/api.php" rel="noopener noreferrer" target="_blank">jqmobile 手册</a></li>
<li><a href="https://github.com/maxzhang/maxzhang.github.com/issues" rel="noopener noreferrer" target="_blank">移动浏览器开发集合</a></li>
<li><a href="https://github.com/hoosin/mobile-web-favorites" rel="noopener noreferrer" target="_blank">移动开发大杂烩</a></li>
<li><a href="http://lin-chao.github.io/2014/11/14/%E5%BE%AE%E4%BF%A1webview%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/" rel="noopener noreferrer" target="_blank">微信webview中的一些问题</a></li>
</ol></li>
</ol><ol start="2">
<li>框架</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://framework7.taobao.org/" rel="noopener noreferrer" target="_blank">特色的HTML框架可以创建精美的iOS应用</a></li>
<li><a href="http://m.sui.taobao.org/" rel="noopener noreferrer" target="_blank">淘宝SUI</a></li>
</ol></li>
</ol>
<p>10. avalon</p>
<ul>
<li><a href="http://avalonjs.github.io/" rel="noopener noreferrer" target="_blank">avalonjs</a></li>
<li><a href="http://ued.qunar.com/oniui/index.html" rel="noopener noreferrer" target="_blank">Avalon新一代UI库： OniUI</a></li>
<li><a href="https://github.com/RubyLouvre/avalon.oniui" rel="noopener noreferrer" target="_blank">avalon.oniui-基于avalon的组件库</a></li>
</ul>
<p>11. Requriejs</p>
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2012/10/javascript_module.html" rel="noopener noreferrer" target="_blank">Javascript模块化编程（一）：模块的写法</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html" rel="noopener noreferrer" target="_blank">Javascript模块化编程（二）：AMD规范</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2012/11/require_js.html" rel="noopener noreferrer" target="_blank">Javascript模块化编程（三）：require.js的用法</a></li>
<li><a href="http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html" rel="noopener noreferrer" target="_blank">RequireJS入门（一）</a></li>
<li><a href="http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html" rel="noopener noreferrer" target="_blank">RequireJS入门（二）</a></li>
<li><a href="http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html" rel="noopener noreferrer" target="_blank">RequireJS进阶（三）</a></li>
<li><a href="http://www.cnblogs.com/yexiaochai/p/3632580.html" rel="noopener noreferrer" target="_blank">requrie源码学习</a></li>
<li><a href="http://www.oschina.net/translate/getting-started-with-the-requirejs-library" rel="noopener noreferrer" target="_blank">requrie 入门指南</a></li>
<li><a href="http://www.cnblogs.com/yexiaochai/p/3214926.html" rel="noopener noreferrer" target="_blank">requrieJS 学习笔记</a></li>
<li><a href="http://cyj.me/why-seajs/requirejs/" rel="noopener noreferrer" target="_blank">requriejs 其一</a></li>
<li><a href="http://www.cnblogs.com/yexiaochai/p/3221081.html" rel="noopener noreferrer" target="_blank">require backbone结合</a></li>
</ul>
<p>12. Seajs</p>
<ul>
<li><a href="http://seajs.org/" rel="noopener noreferrer" target="_blank">seajs</a></li>
<li><a href="http://cyj.me/why-seajs/zh/" rel="noopener noreferrer" target="_blank">seajs 中文手册</a></li>
</ul>
<p>13. Less,sass</p>
<ul>
<li><a href="http://www.w3cplus.com/sassguide/" rel="noopener noreferrer" target="_blank">sass</a></li>
<li><a href="http://www.sass.hk/" rel="noopener noreferrer" target="_blank">sass教程-sass中国</a></li>
<li><a href="http://sass.bootcss.com/" rel="noopener noreferrer" target="_blank">Sass 中文文档</a></li>
<li><a href="http://less.bootcss.com/" rel="noopener noreferrer" target="_blank">less</a></li>
</ul>
<p>14. Markdown</p>
<ul>
<li><a href="http://wowubuntu.com/markdown/" rel="noopener noreferrer" target="_blank">Markdown 语法说明 (简体中文版)</a></li>
<li><a href="https://github.com/LearnShare/Learning-Markdown/blob/master/README.md" rel="noopener noreferrer" target="_blank">markdown入门参考</a></li>
<li><a href="https://www.gitbook.com/" rel="noopener noreferrer" target="_blank">gitbook</a>&nbsp;国外的在线markdown可编辑成书</li>
<li><a href="https://www.zybuluo.com/mdeditor" rel="noopener noreferrer" target="_blank">mdeditor</a>&nbsp;一款国内的在线markdown编辑器</li>
<li><a href="https://stackedit.io/" rel="noopener noreferrer" target="_blank">stackedit</a>&nbsp;国外的在线markdown编辑器，功能强大，同步云盘</li>
<li><a href="http://bh-lay.github.io/mditor/" rel="noopener noreferrer" target="_blank">mditor</a>&nbsp;一款轻量级的markdown编辑器</li>
<li><a href="https://github.com/lepture/editor" rel="noopener noreferrer" target="_blank">lepture-editor</a></li>
<li><a href="https://github.com/jbt/markdown-editor" rel="noopener noreferrer" target="_blank">markdown-editor</a></li>
</ul>
<p>15. D3</p>
<ul>
<li><a href="https://github.com/mbostock/d3/wiki/Tutorials" rel="noopener noreferrer" target="_blank">d3 Tutorials</a></li>
<li><a href="https://github.com/mbostock/d3/wiki/Gallery" rel="noopener noreferrer" target="_blank">Gallery</a></li>
<li><a href="http://datavisual.lofter.com/post/40cf3a_188e535" rel="noopener noreferrer" target="_blank">lofter</a></li>
<li><a href="http://alanland.iteye.com/blog/1878595" rel="noopener noreferrer" target="_blank">iteye</a></li>
<li><a href="http://javascript.ruanyifeng.com/library/d3.html" rel="noopener noreferrer" target="_blank">ruanyifeng</a></li>
</ul>
<p>16. 兼容性</p>
<ul>
<li><a href="http://kangax.github.io/compat-table/es6/" rel="noopener noreferrer" target="_blank">esma 兼容列表</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/validator.html.zh-cn" rel="noopener noreferrer" target="_blank">W3C CSS验证服务</a></li>
<li><a href="http://caniuse.com/#index" rel="noopener noreferrer" target="_blank">caniuse</a></li>
<li><a href="http://csscreator.com/properties" rel="noopener noreferrer" target="_blank">csscreator</a></li>
<li><a href="http://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85).aspx" rel="noopener noreferrer" target="_blank">microsoft</a></li>
<li><a href="http://www.responsinator.com/" rel="noopener noreferrer" target="_blank">在线测兼容-移动端</a></li>
<li><a href="https://www.manymo.com/emulators" rel="noopener noreferrer" target="_blank">emulators</a></li>
</ul>
<p>17. UI相关</p>
<ul>
<li><a href="http://v3.bootcss.com/" rel="noopener noreferrer" target="_blank">bootcss</a></li>
<li><a href="http://www.w3cplus.com/MetroUICSS/" rel="noopener noreferrer" target="_blank">MetroUICSS</a></li>
<li><a href="http://semantic-ui.com/" rel="noopener noreferrer" target="_blank">semantic</a></li>
<li><a href="http://alexwolfe.github.io/Buttons/" rel="noopener noreferrer" target="_blank">Buttons</a></li>
<li><a href="http://hiloki.github.io/kitecss/" rel="noopener noreferrer" target="_blank">kitecss</a></li>
<li><a href="http://www.pintuer.com/" rel="noopener noreferrer" target="_blank">pintuer</a></li>
<li><a href="http://amazeui.org/" rel="noopener noreferrer" target="_blank">amazeui</a></li>
<li><a href="http://www.worldhello.net/gotgithub/index.html" rel="noopener noreferrer" target="_blank">worldhello</a></li>
<li><a href="http://igit.linuxtoy.org/contents.html" rel="noopener noreferrer" target="_blank">linuxtoy</a></li>
<li><a href="http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn/" rel="noopener noreferrer" target="_blank">gitmagic</a></li>
<li><a href="http://rogerdudler.github.io/git-guide/index.zh.html" rel="noopener noreferrer" target="_blank">rogerdudler</a></li>
<li><a href="http://gitref.justjavac.com/" rel="noopener noreferrer" target="_blank">gitref</a></li>
<li><a href="http://git-scm.com/book/zh" rel="noopener noreferrer" target="_blank">book</a></li>
<li><a href="http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic/" rel="noopener noreferrer" target="_blank">gogojimmy</a></li>
</ul>
<p>18. HTTP</p>
<ul>
<li><a href="http://segmentfault.com/bookmark/1230000002521721" rel="noopener noreferrer" target="_blank">HTTP API 设计指南</a></li>
</ul>
<p>19. 其它API</p>
<ul>
<li><a href="https://github.com/jsfront/src/blob/master/javascriptoo" rel="noopener noreferrer" target="_blank">javascript流行库汇总</a></li>
<li><a href="http://niceue.com/validator/demo/index.php" rel="noopener noreferrer" target="_blank">验证api</a></li>
<li><a href="http://www.css88.com/doc/underscore/" rel="noopener noreferrer" target="_blank">underscore 中文手册</a></li>
<li><a href="http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031" rel="noopener noreferrer" target="_blank">underscore源码分析</a></li>
<li><a href="http://yalishizhude.github.io/tags/underscore/" rel="noopener noreferrer" target="_blank">underscore源码分析-亚里士朱德的博客</a></li>
<li><a href="http://underscorejs.org/" rel="noopener noreferrer" target="_blank">underscrejs en api</a></li>
<li><a href="https://lodash.com/" rel="noopener noreferrer" target="_blank">lodash - underscore的代替品</a></li>
<li><a href="http://extjs-doc-cn.github.io/ext4api/" rel="noopener noreferrer" target="_blank">ext4api</a></li>
<li><a href="http://www.csser.com/tools/backbone/backbone.js.html" rel="noopener noreferrer" target="_blank">backbone 中文手册</a></li>
<li><a href="http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm" rel="noopener noreferrer" target="_blank">qwrap手册</a></li>
<li><a href="http://easings.net/zh-cn" rel="noopener noreferrer" target="_blank">缓动函数</a></li>
<li><a href="http://www.w3school.com.cn/svg/svg_reference.asp" rel="noopener noreferrer" target="_blank">svg 中文参考</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG" rel="noopener noreferrer" target="_blank">svg mdn参考</a></li>
<li><a href="https://github.com/gabelerner/canvg" rel="noopener noreferrer" target="_blank">svg 导出 canvas</a></li>
<li><a href="https://github.com/exupero/saveSvgAsPng" rel="noopener noreferrer" target="_blank">svg 导出 png</a></li>
<li><a href="http://www.zamzar.com/convert/ai-to-svg/" rel="noopener noreferrer" target="_blank">ai-to-svg</a></li>
<li><a href="https://github.com/machao/localStorage" rel="noopener noreferrer" target="_blank">localStorage 库</a></li>
</ul>
<p>20. 图表类</p>
<ul>
<li><a href="http://www.hcharts.cn/api/index.php" rel="noopener noreferrer" target="_blank">Highcharts 中文API</a></li>
<li><a href="http://api.highcharts.com/highcharts" rel="noopener noreferrer" target="_blank">Highcharts 英文API</a></li>
<li><a href="http://echarts.baidu.com/" rel="noopener noreferrer" target="_blank">ECharts 百度的图表软件</a></li>
<li><a href="http://lbs.amap.com/api/" rel="noopener noreferrer" target="_blank">高德地图</a></li>
<li><a href="http://paperjs.org/" rel="noopener noreferrer" target="_blank">开源的矢量图脚本框架</a></li>
<li><a href="http://jvectormap.com/" rel="noopener noreferrer" target="_blank">svg 地图</a></li>
</ul>
<p>21. vue</p>
<ul>
<li><a href="http://cn.vuejs.org/" rel="noopener noreferrer" target="_blank">Vue</a></li>
<li><a href="http://forum.vuejs.org/" rel="noopener noreferrer" target="_blank">Vue 论坛</a></li>
<li><a href="http://www.cnblogs.com/aaronjs/p/3660102.html" rel="noopener noreferrer" target="_blank">Vue 入门指南</a></li>
<li><a href="http://segmentfault.com/a/1190000000411057" rel="noopener noreferrer" target="_blank">Vue 的一些资源索引</a></li>
</ul>
<p>21. 正则</p>
<ul>
<li><a href="http://segmentfault.com/a/1190000002471140" rel="noopener noreferrer" target="_blank">JS正则表达式元字符</a></li>
<li><a href="http://deerchao.net/tutorials/regex/regex.htm" rel="noopener noreferrer" target="_blank">正则表达式30分钟入门教程</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions" rel="noopener noreferrer" target="_blank">MDN-正则表达式</a></li>
<li><a href="http://javascript.ruanyifeng.com/stdlib/regexp.html" rel="noopener noreferrer" target="_blank">ruanyifeng - RegExp对象</a></li>
<li><a href="http://div.io/topic/764?page=1" rel="noopener noreferrer" target="_blank">小胡子哥 - 进阶正则表达式</a></li>
<li><a href="https://github.com/Cedriking/is.js/blob/master/is.js" rel="noopener noreferrer" target="_blank">is.js</a></li>
<li><a href="http://regexper.com/" rel="noopener noreferrer" target="_blank">正则在线测试</a></li>
</ul>
<p>22. ionic</p>
<ul>
<li><a href="https://github.com/ychow/ionic-guide" rel="noopener noreferrer" target="_blank">ionic</a></li>
</ul>
<p>23. 其它</p>
<ul>
<li><a href="http://mockjs.com/" rel="noopener noreferrer" target="_blank">Mock.js 是一款模拟数据生成器</a></li>
</ul>
<h3 id="57e93384">三. 开发规范</h3>
<ol>
<li>前端</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://alloyteam.github.io/CodeGuide" rel="noopener noreferrer" target="_blank">通过分析github代码库总结出来的工程师代码书写习惯</a></li>
<li><a href="http://codeguide.bootcss.com/" rel="noopener noreferrer" target="_blank">HTML&amp;CSS编码规范 by @mdo</a></li>
<li><a href="http://www.alloyteam.com/2011/10/107/" rel="noopener noreferrer" target="_blank">团队合作的css命名规范-腾讯AlloyTeam前端团队</a></li>
<li><a href="http://yuwenhui.github.io/" rel="noopener noreferrer" target="_blank">前端编码规范之js - by yuwenhui</a></li>
<li><a href="http://www.cnblogs.com/hustskyking/p/javascript-spec.html" rel="noopener noreferrer" target="_blank">前端编码规范之js - by 李靖</a></li>
<li><a href="http://zhibimo.com/read/Ashu/front-end-style-guide/" rel="noopener noreferrer" target="_blank">前端开发规范手册</a></li>
<li><a href="https://github.com/yuche/javascript#table-of-contents" rel="noopener noreferrer" target="_blank">Airbnb JavaScript 编码规范（简体中文版）</a></li>
<li><a href="http://www.zhihu.com/question/20351507" rel="noopener noreferrer" target="_blank">AMD与CMD规范的区别</a></li>
<li><a href="http://www.cnblogs.com/tugenhua0707/p/3507957.html" rel="noopener noreferrer" target="_blank">AMD与CMD规范的区别</a></li>
<li><a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html" rel="noopener noreferrer" target="_blank">KISSY 源码规范</a></li>
<li><a href="http://codeguide.bootcss.com/" rel="noopener noreferrer" target="_blank">bt编码规范</a></li>
<li><a href="https://github.com/Suxiaogang/Code_Guide" rel="noopener noreferrer" target="_blank">规范加强版</a></li>
<li><a href="http://blog.jobbole.com/79075/" rel="noopener noreferrer" target="_blank">前端代码规范 及 最佳实践</a></li>
<li><a href="http://coderlmn.github.io/code-standards/" rel="noopener noreferrer" target="_blank">百度前端规范</a></li>
<li><a href="http://isobar-idev.github.io/code-standards/" rel="noopener noreferrer" target="_blank">百度前端规范</a></li>
<li><a href="http://zhuanlan.zhihu.com/fuyun/19884834" rel="noopener noreferrer" target="_blank">百度前端规范</a></li>
<li><a href="https://github.com/gf-web/es6-coding-style/" rel="noopener noreferrer" target="_blank">ECMAScript6 编码规范--广发证券前端团队</a></li>
<li><a href="http://blog.jobbole.com/79484/" rel="noopener noreferrer" target="_blank">JavaScript 风格指南/编码规范（Airbnb公司版）</a></li>
<li><a href="http://nec.netease.com/standard" rel="noopener noreferrer" target="_blank">网易前端开发规范</a></li>
<li><a href="http://www.75team.com/archives/1049" rel="noopener noreferrer" target="_blank">css模块</a></li>
<li><a href="https://github.com/ecomfe/spec" rel="noopener noreferrer" target="_blank">前端规范资源列表</a></li>
</ol></li>
</ol><ol start="2">
<li>Nodejs</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/wwsun/node-style-guide" rel="noopener noreferrer" target="_blank">Node.js 风格指南</a></li>
</ol></li>
</ol><ol start="3">
<li>PHP</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://segmentfault.com/a/1190000000443795" rel="noopener noreferrer" target="_blank">最流行的PHP 代码规范</a></li>
<li><a href="https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md" rel="noopener noreferrer" target="_blank">最流行的PHP 代码规范</a></li>
</ol></li>
</ol><ol start="4">
<li>Android</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.cnblogs.com/lcw/p/3619181.html" rel="noopener noreferrer" target="_blank">【敏捷开发】Android团队开发规范</a></li>
<li><a href="http://www.jianshu.com/p/4390f4fe19b3" rel="noopener noreferrer" target="_blank">Android 开发规范与应用</a></li>
</ol></li>
</ol>
<h3 id="88f7226d">四. 其它收集</h3>
<p>1. 各大公司开源项目</p>
<ul>
<li><a href="https://code.facebook.com/projects/web/" rel="noopener noreferrer" target="_blank">Facebook Projects</a></li>
<li><a href="http://fex.baidu.com/" rel="noopener noreferrer" target="_blank">百度web前端研发部</a></li>
<li><a href="http://efe.baidu.com/" rel="noopener noreferrer" target="_blank">百度EFE</a></li>
<li><a href="https://github.com/fex-team/" rel="noopener noreferrer" target="_blank">百度github</a></li>
<li><a href="http://www.alloyteam.com/" rel="noopener noreferrer" target="_blank">alloyteam</a></li>
<li><a href="http://alloyteam.github.io/" rel="noopener noreferrer" target="_blank">alloyteam-github</a></li>
<li><a href="https://github.com/AlloyTeam/AlloyGameEngine" rel="noopener noreferrer" target="_blank">alloyteam-AlloyGameEngine</a></li>
<li><a href="http://alloyteam.github.io/AlloyDesigner/" rel="noopener noreferrer" target="_blank">AlloyDesigner</a>&nbsp;即时修改，即时保存，设计稿较正，其它开发辅助工具</li>
<li><a href="http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/" rel="noopener noreferrer" target="_blank">H5交互页编辑器AEditor介绍</a>&nbsp;H5动画交互页开发的工具介绍</li>
<li><a href="http://aeditor.alloyteam.com/" rel="noopener noreferrer" target="_blank">AEditor</a>&nbsp;H5动画交互页开发的工具</li>
<li><a href="http://forum.maka.im/wordpress/" rel="noopener noreferrer" target="_blank">maka</a></li>
<li><a href="https://github.com/fenbility/weekly-feed" rel="noopener noreferrer" target="_blank">值得订阅的weekly</a></li>
<li><a href="http://cube.qq.com/" rel="noopener noreferrer" target="_blank">腾讯html5</a></li>
<li><a href="http://75team.github.io/" rel="noopener noreferrer" target="_blank">奇舞团开源项目</a></li>
<li><a href="http://ued.qunar.com/" rel="noopener noreferrer" target="_blank">Qunar UED</a></li>
</ul>
<p>2. Javascript</p>
<ol>
<li>常用</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/" rel="noopener noreferrer" target="_blank">ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性</a></li>
<li><a href="http://mottie.github.io/Keyboard/" rel="noopener noreferrer" target="_blank">模拟键盘</a></li>
<li><a href="https://github.com/hotoo/pinyin" rel="noopener noreferrer" target="_blank">拼音</a></li>
<li><a href="https://github.com/mc-zone/IDValidator" rel="noopener noreferrer" target="_blank">中国个人身份证号验证</a></li>
</ol></li>
</ol><ol start="2">
<li>算法</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/Ralph-Wang/algorithm.in.js" rel="noopener noreferrer" target="_blank">数据结构与算法 JavaScript 描述. 章节练习</a></li>
<li><a href="https://github.com/twobin/twobinSort" rel="noopener noreferrer" target="_blank">常见排序算法（JS版）</a></li>
<li><a href="https://github.com/luofei2011/jsAgm/blob/master/js/sort.js" rel="noopener noreferrer" target="_blank">经典排序</a></li>
<li><a href="https://github.com/hechangmin/jssort" rel="noopener noreferrer" target="_blank">常见排序算法-js版本</a></li>
<li><a href="https://github.com/lightningtgc/JavaScript-Algorithms" rel="noopener noreferrer" target="_blank">JavaScript 算法与数据结构 精华集</a></li>
<li><a href="http://www.nowcoder.com/live/courses" rel="noopener noreferrer" target="_blank">面试常考算法题精讲</a></li>
</ol></li>
</ol><ol start="3">
<li>移动端</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/ftlabs/fastclick" rel="noopener noreferrer" target="_blank">fastclick</a></li>
<li><a href="https://github.com/mmastrac/jquery-noclickdelay" rel="noopener noreferrer" target="_blank">no-click-delay</a></li>
</ol></li>
</ol><ol start="4">
<li>JSON</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://beta.json-generator.com/" rel="noopener noreferrer" target="_blank">模拟生成JSON数据</a></li>
<li><a href="http://jsonp.afeld.me/" rel="noopener noreferrer" target="_blank">返回跨域JSONAPI</a></li>
</ol></li>
</ol>
<p>3. Html5</p>
<ul>
<li><a href="http://www.zhihu.com/question/24398907" rel="noopener noreferrer" target="_blank">HTML5 有哪些让你惊艳的 demo？</a></li>
<li><a href="http://jo2.org/html5-canvas-tutorial-list/" rel="noopener noreferrer" target="_blank">html5 Canvas画图系列教程目录</a></li>
</ul>
<p>4. CSS</p>
<ul>
<li><a href="http://browserhacks.com/" rel="noopener noreferrer" target="_blank">browserhacks</a></li>
</ul>
<p>5. jQuery</p>
<ol>
<li>焦点图</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/koen301/myfocus" rel="noopener noreferrer" target="_blank">myfocus</a></li>
<li><a href="http://www.chhua.com/myfocus/" rel="noopener noreferrer" target="_blank">myfocus-官方演示站</a></li>
<li><a href="http://www.superslide2.com/" rel="noopener noreferrer" target="_blank">SuperSlidev2.1 -- 大话主席</a></li>
<li><a href="http://www.bujichong.com/sojs/soChange/index.html" rel="noopener noreferrer" target="_blank">soChange</a></li>
</ol></li>
</ol>
<p>6. Ext, EasyUI, J-UI 及其它各种UI方案</p>
<ol>
<li>Ext</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://www.sencha.com/products/extjs/" rel="noopener noreferrer" target="_blank">extjs</a></li>
<li><a href="http://docs.sencha.com/extjs/4.0.7/" rel="noopener noreferrer" target="_blank">ext4英文api</a></li>
<li><a href="http://extjs-doc-cn.github.io/ext4api/" rel="noopener noreferrer" target="_blank">ext4中文api</a></li>
</ol></li>
</ol><ol start="2">
<li>EasyUI</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://jquery-easyui.googlecode.com/svn/trunk/src/" rel="noopener noreferrer" target="_blank">jquery easyui 未压缩源代码</a></li>
</ol></li>
</ol><ol start="3">
<li>J-UI</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.j-ui.com/" rel="noopener noreferrer" target="_blank">J-UI</a></li>
</ol></li>
</ol><ol start="4">
<li>Other</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://dcloudio.github.io/mui/" rel="noopener noreferrer" target="_blank">MUI-最接近原生APP体验的高性能前端框架</a></li>
<li><a href="http://amazeui.org/" rel="noopener noreferrer" target="_blank">Amaze UI | 中国首个开源 HTML5 跨屏前端框架</a></li>
<li><a href="http://m.sui.taobao.org/" rel="noopener noreferrer" target="_blank">淘宝 HTML5 前端框架</a></li>
<li><a href="http://docs.kissyui.com/" rel="noopener noreferrer" target="_blank">KISSY - 阿里前端JavaScript库</a></li>
<li><a href="http://nej.netease.com/" rel="noopener noreferrer" target="_blank">网易Nej - Nice Easy Javascript</a></li>
<li><a href="http://demos.telerik.com/kendo-ui/mvvm/index" rel="noopener noreferrer" target="_blank">Kendo UI MVVM Demo</a></li>
<li><a href="http://www.bootcss.com/" rel="noopener noreferrer" target="_blank">Bootstrap</a></li>
<li><a href="http://smartui.chinamzz.com/" rel="noopener noreferrer" target="_blank">Smart UI</a></li>
<li><a href="http://developer.yahoo.com/yui/grids/" rel="noopener noreferrer" target="_blank">雅虎UI - CSS UI</a></li>
</ol></li>
</ol>
<p>7. 页面 社会化 分享功能</p>
<ul>
<li><a href="http://share.baidu.com/" rel="noopener noreferrer" target="_blank">百度分享</a>&nbsp;pc端</li>
<li><a href="http://jiathis.com/" rel="noopener noreferrer" target="_blank">JiaThis</a>&nbsp;pc端</li>
<li><a href="http://developer.baidu.com/soc/share" rel="noopener noreferrer" target="_blank">社会化分享组件</a>&nbsp;移动端</li>
<li><a href="http://www.mob.com/#/index" rel="noopener noreferrer" target="_blank">ShareSDK 轻松实现社会化功能</a>&nbsp;移动端</li>
<li><a href="http://dev.umeng.com/social/android/quick-integration" rel="noopener noreferrer" target="_blank">友盟分享</a>&nbsp;移动端</li>
</ul>
<p>8. 富文本编辑器</p>
<ul>
<li><a href="http://ueditor.baidu.com/website/" rel="noopener noreferrer" target="_blank">百度 ueditor</a></li>
<li><a href="http://ckeditor.com/" rel="noopener noreferrer" target="_blank">经典的ckeditor</a></li>
<li><a href="http://kindeditor.net/" rel="noopener noreferrer" target="_blank">经典的kindeditor</a></li>
<li><a href="http://www.bootcss.com/p/bootstrap-wysiwyg/" rel="noopener noreferrer" target="_blank">wysiwyg</a></li>
<li><a href="http://integ.github.io/BachEditor/" rel="noopener noreferrer" target="_blank">一个有情怀的编辑器。Bach's Editor</a></li>
<li><a href="https://github.com/mycolorway/simditor" rel="noopener noreferrer" target="_blank">tower用的编辑器</a></li>
<li><a href="https://github.com/summernote/summernote" rel="noopener noreferrer" target="_blank">summernote 编辑器</a></li>
<li><a href="http://neilj.github.io/Squire/" rel="noopener noreferrer" target="_blank">html5编辑器</a></li>
<li><a href="http://lab.hustlzp.com/XEditor/" rel="noopener noreferrer" target="_blank">XEditor</a></li>
<li><a href="https://github.com/wangfupeng1988/wangEditor" rel="noopener noreferrer" target="_blank">wangEditor</a></li>
<li><a href="http://alex-d.github.io/Trumbowyg/" rel="noopener noreferrer" target="_blank">Trumbowyg - 轻量编辑器</a></li>
</ul>
<p>9. 日历</p>
<ol>
<li>PC</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.my97.net/dp/demo/index.htm" rel="noopener noreferrer" target="_blank">经典my97</a></li>
<li><a href="http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html" rel="noopener noreferrer" target="_blank">强大的独立日期选择器</a></li>
<li><a href="http://arshaw.com/fullcalendar/" rel="noopener noreferrer" target="_blank">fullcalendar</a></li>
<li><a href="http://blog.csdn.net/francislaw/article/details/7740630" rel="noopener noreferrer" target="_blank">fullcalendar日历控件知识点集合</a></li>
<li><a href="http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html" rel="noopener noreferrer" target="_blank">中文api</a></li>
<li><a href="https://github.com/zzyss86/LunarCalendar" rel="noopener noreferrer" target="_blank">农历日历</a></li>
<li><a href="http://www.sucaisj.com/jiaoben/date/201509/16856.html" rel="noopener noreferrer" target="_blank">超酷的仿百度带节日日历老黄历控件</a></li>
<li><a href="http://momentjs.com/" rel="noopener noreferrer" target="_blank">日期格式化</a></li>
<li><a href="https://github.com/Johnqing/QPAYCalendar/" rel="noopener noreferrer" target="_blank">大牛日历控件</a></li>
<li><a href="https://github.com/Iamlars/dateMarker" rel="noopener noreferrer" target="_blank">我群某管理作品</a></li>
<li><a href="http://digitalbush.com/projects/masked-input-plugin/" rel="noopener noreferrer" target="_blank">input按位替换-官网</a></li>
<li><a href="https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2" rel="noopener noreferrer" target="_blank">input按位替换-github</a></li>
<li><a href="https://github.com/dangrossman/bootstrap-daterangepicker" rel="noopener noreferrer" target="_blank">bootstrap-daterangepicker</a></li>
<li><a href="http://www.vandelaydesign.com/30-best-free-jquery-plugins/" rel="noopener noreferrer" target="_blank">国外30个插件集合</a></li>
<li><a href="http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/" rel="noopener noreferrer" target="_blank">JavaScript datepicker</a></li>
<li><a href="http://jonthornton.github.io/Datepair.js/" rel="noopener noreferrer" target="_blank">Datepair.js</a></li>
<li><a href="https://github.com/glad/glDatePicker" rel="noopener noreferrer" target="_blank">一个风格多样的日历</a></li>
<li><a href="http://amsul.ca/pickadate.js/date/" rel="noopener noreferrer" target="_blank">弹出层式的全日历</a></li>
<li><a href="http://www.daterangepicker.com/" rel="noopener noreferrer" target="_blank">jquery双日历</a></li>
</ol></li>
</ol><ol start="2">
<li>移动</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.frankdemo.cn/index.php?c=content&amp;a=show&amp;id=115" rel="noopener noreferrer" target="_blank">大气实用jQuery手机移动端日历日期选择插件</a></li>
<li><a href="https://mobiscroll.com/" rel="noopener noreferrer" target="_blank">jQuery Mobile 移动开发中的日期插件Mobiscroll</a></li>
</ol></li>
</ol><ol start="3">
<li>Date library</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/datejs/Datejs" rel="noopener noreferrer" target="_blank">Datejs</a></li>
<li><a href="http://sugarjs.com/api/Date" rel="noopener noreferrer" target="_blank">sugarjs</a></li>
</ol></li>
</ol>
<p>10. 综合效果搜索平台</p>
<ul>
<li><a href="http://www.jq22.com/" rel="noopener noreferrer" target="_blank">效果网</a></li>
<li><a href="http://www.17sucai.com/" rel="noopener noreferrer" target="_blank">17素材</a></li>
<li><a href="http://microjs.com/" rel="noopener noreferrer" target="_blank">常用的JavaScript代码片段</a></li>
</ul>
<p>11. 前端工程化</p>
<ol>
<li>概述</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.awesomes.cn/" rel="noopener noreferrer" target="_blank">前端工具大全</a></li>
<li><a href="https://github.com/fouber/blog/issues/10?from=timeline&amp;isappinstalled=0" rel="noopener noreferrer" target="_blank">什么是前端工程化</a></li>
</ol></li>
</ol><ol start="2">
<li>Gulp</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://gulpjs.com/" rel="noopener noreferrer" target="_blank">Gulp官网</a></li>
<li><a href="http://www.gulpjs.com.cn/" rel="noopener noreferrer" target="_blank">Gulp中文网</a></li>
<li><a href="https://github.com/Platform-CUF/use-gulp" rel="noopener noreferrer" target="_blank">gulp资料收集</a></li>
<li><a href="http://javascript.ruanyifeng.com/tool/gulp.html" rel="noopener noreferrer" target="_blank">Gulp：任务自动管理工具 - ruanyifeng</a></li>
<li><a href="http://gulpjs.com/plugins/" rel="noopener noreferrer" target="_blank">Gulp插件</a></li>
<li><a href="http://www.ido321.com/1622.html" rel="noopener noreferrer" target="_blank">Gulp不完全入门教程</a></li>
<li><a href="https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33" rel="noopener noreferrer" target="_blank">为什么使用gulp?</a></li>
<li><a href="http://www.dbpoo.com/getting-started-with-gulp/" rel="noopener noreferrer" target="_blank">Gulp安装及配合组件构建前端开发一体化</a></li>
<li><a href="https://github.com/nimojs/gulp-book" rel="noopener noreferrer" target="_blank">Gulp 入门指南</a></li>
<li><a href="https://github.com/nimojs/blog/issues/19" rel="noopener noreferrer" target="_blank">Gulp 入门指南 - nimojs</a></li>
<li><a href="http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/" rel="noopener noreferrer" target="_blank">Gulp入门教程</a></li>
<li><a href="http://www.imooc.com/video/5692" rel="noopener noreferrer" target="_blank">Gulp in Action</a></li>
<li><a href="http://www.w3ctech.com/topic/134" rel="noopener noreferrer" target="_blank">Gulp开发教程（翻译）</a></li>
<li><a href="http://www.cnblogs.com/2050/p/4198792.html" rel="noopener noreferrer" target="_blank">前端构建工具gulpjs的使用介绍及技巧</a></li>
</ol></li>
</ol><ol start="3">
<li>Grunt</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://gruntjs.com/" rel="noopener noreferrer" target="_blank">gruntjs</a></li>
<li><a href="http://www.gruntjs.net/" rel="noopener noreferrer" target="_blank">Grunt中文网</a></li>
</ol></li>
</ol><ol start="4">
<li>Fis</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://fex-team.github.io/fis-site/index.html" rel="noopener noreferrer" target="_blank">fis 官网</a></li>
<li><a href="http://fis.baidu.com/" rel="noopener noreferrer" target="_blank">fis</a></li>
</ol></li>
</ol><ol start="5">
<li>webpack</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/webpack/webpack" rel="noopener noreferrer" target="_blank">webpack</a></li>
<li><a href="http://html-js.com/article/3009" rel="noopener noreferrer" target="_blank">Webpack，101入门体验</a></li>
<li><a href="http://html-js.com/article/3113" rel="noopener noreferrer" target="_blank">webpack入门教程</a></li>
<li><a href="http://segmentfault.com/a/1190000003499526" rel="noopener noreferrer" target="_blank">基于webpack搭建前端工程解决方案探索</a></li>
<li><a href="http://zhuanlan.zhihu.com/FrontendMagazine/20367175" rel="noopener noreferrer" target="_blank">Webpack傻瓜式指南（一）</a></li>
<li><a href="https://github.com/TJZC/Banyan/wiki/Webpack%E6%8C%87%E5%8D%97" rel="noopener noreferrer" target="_blank">Webpack指南</a></li>
</ol></li>
</ol>
<p>12. 轮播图</p>
<ol>
<li>pc图轮</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.jsfoot.com/jquery/demo/2011-09-20/192.html" rel="noopener noreferrer" target="_blank">单屏轮播sochange</a></li>
<li><a href="http://bxslider.com/examples/carousel-demystified" rel="noopener noreferrer" target="_blank">左右按钮多图切换</a></li>
<li><a href="https://github.com/alvarotrigo/fullPage.js/" rel="noopener noreferrer" target="_blank">fullpage全屏轮播</a></li>
</ol></li>
</ol><ol start="2">
<li>移动端</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.swipejs.com/" rel="noopener noreferrer" target="_blank">无缝切换</a></li>
<li><a href="http://www.idangero.us/swiper" rel="noopener noreferrer" target="_blank">滑屏效果</a></li>
<li><a href="https://github.com/peunzhang/fullpage" rel="noopener noreferrer" target="_blank">全屏fullpage</a></li>
<li><a href="https://github.com/qiqiboy/touchslider" rel="noopener noreferrer" target="_blank">单个图片切换</a></li>
<li><a href="https://github.com/peunzhang/slip.js" rel="noopener noreferrer" target="_blank">单个全屏切换</a></li>
<li><a href="http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group" rel="noopener noreferrer" target="_blank">百度的切换库</a></li>
<li><a href="https://github.com/peunzhang/iSlider" rel="noopener noreferrer" target="_blank">单个全屏切换</a></li>
<li><a href="https://github.com/saw/touch-interfaces" rel="noopener noreferrer" target="_blank">滑屏效果</a></li>
<li><a href="http://baijs.com/tinycircleslider/" rel="noopener noreferrer" target="_blank">旋转拖动设置</a></li>
<li><a href="http://touchslider.com/" rel="noopener noreferrer" target="_blank">类似于swipe切换</a></li>
<li><a href="http://www.swiper.com.cn/demo/index.html" rel="noopener noreferrer" target="_blank">支持多种形式的触摸滑动</a></li>
<li><a href="https://github.com/joker-ye/main/blob/master/wap/index.html" rel="noopener noreferrer" target="_blank">滑屏效果</a></li>
<li><a href="http://www.superslide2.com/" rel="noopener noreferrer" target="_blank">大话主席pc移动图片轮换</a></li>
<li><a href="https://github.com/hahnzhu/parallax.js" rel="noopener noreferrer" target="_blank">滑屏效果</a></li>
<li><a href="https://github.com/yanhaijing/zepto.fullpage" rel="noopener noreferrer" target="_blank">基于zepto的fullpage</a></li>
<li><a href="http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html" rel="noopener noreferrer" target="_blank">[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应</a></li>
<li><a href="http://loo2k.com/blog/detecting-wechat-client/" rel="noopener noreferrer" target="_blank">判断微信客户端的那些坑</a></li>
<li><a href="https://github.com/JefferyWang/nativeShare.js" rel="noopener noreferrer" target="_blank">可以通过javascript直接调用原生分享的工具</a></li>
<li><a href="http://www.jiathis.com/help/html/weixin-share-code" rel="noopener noreferrer" target="_blank">JiaThis 分享到微信代码</a></li>
<li><a href="http://fex.baidu.com/blog/2015/05/cross-mobile/" rel="noopener noreferrer" target="_blank">聊聊移动端跨平台开发的各种技术</a></li>
<li><a href="http://www.zhihu.com/question/29922082" rel="noopener noreferrer" target="_blank">前端自动化测试</a></li>
<li><a href="http://ajccom.github.io/niceslider/" rel="noopener noreferrer" target="_blank">多种轮换图片</a></li>
<li><a href="https://mango.github.io/slideout/" rel="noopener noreferrer" target="_blank">滑动侧边栏</a></li>
</ol></li>
</ol>
<p>13. 文件上传</p>
<ul>
<li><a href="http://fex.baidu.com/webuploader/" rel="noopener noreferrer" target="_blank">百度上传组件</a></li>
<li><a href="https://blueimp.github.io/jQuery-File-Upload/" rel="noopener noreferrer" target="_blank">上传</a></li>
<li><a href="http://www.hdfu.net/" rel="noopener noreferrer" target="_blank">flash 头像上传</a></li>
<li><a href="http://www.dropzonejs.com/" rel="noopener noreferrer" target="_blank">图片上传预览</a></li>
<li><a href="http://elemefe.github.io/image-cropper/" rel="noopener noreferrer" target="_blank">图片裁剪</a></li>
<li><a href="http://www.shearphoto.com/" rel="noopener noreferrer" target="_blank">图片裁剪-shearphoto</a></li>
<li><a href="http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&amp;os=0&amp;sort=view&amp;p=2" rel="noopener noreferrer" target="_blank">jQuery图片处理</a></li>
</ul>
<p>14. 模拟select</p>
<ul>
<li><a href="http://aui.github.io/popupjs/doc/selectbox.html" rel="noopener noreferrer" target="_blank">糖饼 select</a></li>
<li><a href="https://github.com/rmm5t/jquery-flexselect" rel="noopener noreferrer" target="_blank">flexselect</a></li>
<li><a href="http://loudev.com/" rel="noopener noreferrer" target="_blank">双select</a></li>
<li><a href="http://select2.github.io/" rel="noopener noreferrer" target="_blank">select2</a></li>
</ul>
<p>15. 取色插件</p>
<ul>
<li><a href="http://www.jq22.com/plugin/367" rel="noopener noreferrer" target="_blank">类似 Photoshop 的界面取色插件</a></li>
<li><a href="https://github.com/jquery/jquery-color/" rel="noopener noreferrer" target="_blank">jquery color</a></li>
<li><a href="http://www.oschina.net/project/tag/287/color-picker" rel="noopener noreferrer" target="_blank">取色插件集合</a></li>
<li><a href="https://github.com/mattfarina/farbtastic" rel="noopener noreferrer" target="_blank">farbtastic 圆环＋正方形</a></li>
</ul>
<p>16. 城市联动</p>
<ul>
<li><a href="http://www.ijquery.cn/?p=360" rel="noopener noreferrer" target="_blank">jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果</a></li>
</ul>
<p>17. 剪贴板</p>
<ul>
<li><a href="https://github.com/zeroclipboard/zeroclipboard" rel="noopener noreferrer" target="_blank">剪贴板</a></li>
<li><a href="http://zenorocha.github.io/clipboard.js/" rel="noopener noreferrer" target="_blank">clipboard 最新的剪切方案</a></li>
</ul>
<p>18. 简繁转换</p>
<ul>
<li><a href="https://github.com/BYVoid/OpenCC" rel="noopener noreferrer" target="_blank">简繁转换</a></li>
</ul>
<p>19. 表格 Grid</p>
<ul>
<li><a href="http://facebook.github.io/fixed-data-table/" rel="noopener noreferrer" target="_blank">facebook表格</a></li>
<li><a href="http://handsontable.com/" rel="noopener noreferrer" target="_blank">类似于Excel编辑表格-handsontable</a></li>
<li><a href="http://bootstrap-table.wenzhixin.net.cn/" rel="noopener noreferrer" target="_blank">bootstrap-table插件</a></li>
<li><a href="https://www.datatables.net/" rel="noopener noreferrer" target="_blank">datatables</a></li>
</ul>
<p>20. 在线演示</p>
<ul>
<li><a href="http://runjs.cn/" rel="noopener noreferrer" target="_blank">js 在线编辑 - runjs</a></li>
<li><a href="http://jsbin.com/" rel="noopener noreferrer" target="_blank">js 在线编辑 - jsbin</a></li>
<li><a href="http://codepen.io/" rel="noopener noreferrer" target="_blank">js 在线编辑 - codepen</a></li>
<li><a href="http://jsfiddle.net/" rel="noopener noreferrer" target="_blank">js 在线编辑 - jsfiddle</a></li>
<li><a href="http://ideone.com/" rel="noopener noreferrer" target="_blank">java 在线编辑 - ideone</a></li>
<li><a href="http://code.hcharts.cn/" rel="noopener noreferrer" target="_blank">js 在线编辑 - hcharts</a></li>
<li><a href="http://jsdm.com/" rel="noopener noreferrer" target="_blank">js 在线编辑 - jsdm</a></li>
<li><a href="http://sqlfiddle.com/" rel="noopener noreferrer" target="_blank">sql 在线编辑 - sqlfiddle</a></li>
<li><a href="https://thimble.mozilla.org/" rel="noopener noreferrer" target="_blank">mozilla 在线编辑器</a></li>
</ul>
<p>21. 播放器</p>
<ul>
<li><a href="https://github.com/zmmbreeze/DeadSimpleVideoPlayer" rel="noopener noreferrer" target="_blank">Html5 VideoPlayer</a></li>
</ul>
<p>22. 粒子动画</p>
<ul>
<li><a href="http://a-jie.github.io/Proton/#example" rel="noopener noreferrer" target="_blank">Proton 烟花</a></li>
</ul>
<p>23. 表单验证</p>
<ul>
<li><a href="https://github.com/haiercdboy/Validform/blob/master/README.md" rel="noopener noreferrer" target="_blank">Validform</a></li>
<li><a href="http://formvalidator.net/" rel="noopener noreferrer" target="_blank">formvalidator</a></li>
<li><a href="http://www.cnblogs.com/wzmaodong/archive/2012/10/15/2724005.html" rel="noopener noreferrer" target="_blank">jQuery formValidator</a></li>
</ul>
<h3 id="b7509502">五. Nodejs</h3>
<ul>
<li><a href="http://liuqing.pw/" rel="noopener noreferrer" target="_blank">nodejs 篇幅比较巨大</a></li>
<li><a href="https://github.com/alsotang/node-lessons" rel="noopener noreferrer" target="_blank">Node.js 包教不包会</a></li>
<li><a href="http://rainweb.cn/article/category/Nodejs" rel="noopener noreferrer" target="_blank">篇幅比较少</a></li>
<li><a href="http://www.w3cfuns.com/article-5598538-1-1.html" rel="noopener noreferrer" target="_blank">node express 入门教程</a></li>
<li><a href="http://my.oschina.net/u/568264/blog/193773" rel="noopener noreferrer" target="_blank">nodejs定时任务</a></li>
<li><a href="http://60sky.com/" rel="noopener noreferrer" target="_blank">一个nodejs博客</a></li>
<li><a href="http://www.cnblogs.com/yexiaochai/p/3536547.html" rel="noopener noreferrer" target="_blank">【NodeJS 学习笔记04】新闻发布系统</a></li>
<li><a href="http://www.cnblogs.com/qqloving/p/3541099.html" rel="noopener noreferrer" target="_blank">过年7天乐，学nodejs 也快乐</a></li>
<li><a href="https://github.com/nqdeng/7-days-nodejs" rel="noopener noreferrer" target="_blank">七天学会NodeJS</a></li>
<li><a href="http://www.cnblogs.com/zhongweiv/p/nodejs_events.html" rel="noopener noreferrer" target="_blank">Nodejs学习笔记（二）--- 事件模块</a></li>
<li><a href="http://www.cnblogs.com/liusuqi/p/3735491.html" rel="noopener noreferrer" target="_blank">nodejs入门</a></li>
<li><a href="https://github.com/zensh/jsgen" rel="noopener noreferrer" target="_blank">angularjs nodejs</a></li>
<li><a href="http://blog.fens.me/series-nodejs/" rel="noopener noreferrer" target="_blank">从零开始nodejs系列文章</a></li>
<li><a href="http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb" rel="noopener noreferrer" target="_blank">理解nodejs</a></li>
<li><a href="http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/" rel="noopener noreferrer" target="_blank">nodejs事件轮询</a></li>
<li><a href="http://www.nodebeginner.org/index-zh-cn.html" rel="noopener noreferrer" target="_blank">node入门</a></li>
<li><a href="http://ourjs.com/detail/53e1f281c5910a9806000001" rel="noopener noreferrer" target="_blank">nodejs cms</a></li>
<li><a href="http://ourjs.com/detail/529ca5950cb6498814000005" rel="noopener noreferrer" target="_blank">Node初学者入门，一本全面的NodeJS教程</a></li>
<li><a href="http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/" rel="noopener noreferrer" target="_blank">NodeJS的代码调试和性能调优</a></li>
</ul>
<h3 id="edefdcb8">六. 性能优化</h3>
<ol>
<li>常规优化</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering" rel="noopener noreferrer" target="_blank">Javascript高性能动画与页面渲染</a></li>
<li><a href="http://isux.tencent.com/h5-performance.html" rel="noopener noreferrer" target="_blank">移动H5前端性能优化指南</a></li>
<li><a href="http://ued.5173.com/?p=1731" rel="noopener noreferrer" target="_blank">5173首页前端性能优化实践</a></li>
<li><a href="http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers" rel="noopener noreferrer" target="_blank">给网页设计师和前端开发者看的前端性能优化</a></li>
<li><a href="http://www.orzpoint.com/profiling-css-and-optimization-notes/" rel="noopener noreferrer" target="_blank">复杂应用的 CSS 性能分析和优化建议</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/" rel="noopener noreferrer" target="_blank">张鑫旭——前端性能</a></li>
<li><a href="http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html" rel="noopener noreferrer" target="_blank">前端性能监控总结</a></li>
<li><a href="http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/" rel="noopener noreferrer" target="_blank">网站性能优化之CSS无图片技术</a></li>
<li><a href="http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html" rel="noopener noreferrer" target="_blank">web前端性能优化进阶路</a></li>
<li><a href="http://my.eoe.cn/tuwandou/archive/4544.html" rel="noopener noreferrer" target="_blank">前端技术：网站性能优化之CSS无图片技术</a></li>
<li><a href="http://www.baiduux.com/blog/2011/02/15/browser-loading/" rel="noopener noreferrer" target="_blank">浏览器的加载与页面性能优化</a></li>
<li><a href="http://www.w3ctech.com/p/1503" rel="noopener noreferrer" target="_blank">页面加载中的图片性能优化</a></li>
<li><a href="http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD" rel="noopener noreferrer" target="_blank">Hey——前端性能</a></li>
<li><a href="http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/" rel="noopener noreferrer" target="_blank">html优化</a></li>
<li><a href="http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD" rel="noopener noreferrer" target="_blank">99css——性能</a></li>
<li><a href="http://www.yslow.net/category.php?cid=20" rel="noopener noreferrer" target="_blank">Yslow——性能优化</a></li>
<li><a href="http://www.cnblogs.com/yslow/" rel="noopener noreferrer" target="_blank">YSLOW中文介绍</a></li>
<li><a href="http://www.360ito.com/article/40.html" rel="noopener noreferrer" target="_blank">转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化</a></li>
<li><a href="http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml" rel="noopener noreferrer" target="_blank">Yahoo!团队实践分享：网站性能</a></li>
<li><a href="http://blog.jiasule.com/i/153" rel="noopener noreferrer" target="_blank">网站性能优化指南：什么使我们的网站变慢？</a></li>
<li><a href="http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html" rel="noopener noreferrer" target="_blank">网站性能优化实践，减少加载时间，提高用户体验</a></li>
<li><a href="http://www.umtry.com/archives/747.html" rel="noopener noreferrer" target="_blank">浅谈网站性能优化 前端篇</a></li>
<li><a href="http://www.adinnet.cn/blog/designview/2012-7-12/678.html" rel="noopener noreferrer" target="_blank">前端重构实践之如何对网站性能优化？</a></li>
<li><a href="http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/" rel="noopener noreferrer" target="_blank">前端性能优化：使用媒体查询加载指定大小的背景图片</a></li>
<li><a href="http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html" rel="noopener noreferrer" target="_blank">网站性能系列博文</a></li>
<li><a href="http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml" rel="noopener noreferrer" target="_blank">加载，不只是少一点点</a></li>
<li><a href="http://mzhou.me/article/95310/" rel="noopener noreferrer" target="_blank">前端性能的测试与优化</a></li>
<li><a href="http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/" rel="noopener noreferrer" target="_blank">分享网页加载速度优化的一些技巧？</a></li>
<li><a href="http://www.f2es.com/images-bytes-opt/" rel="noopener noreferrer" target="_blank">页面加载中的图片性能优化</a></li>
<li><a href="http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html" rel="noopener noreferrer" target="_blank">web前端优化(基于Yslow)</a></li>
<li><a href="http://www.qianduan.net/website-performance-optimization-tool.html" rel="noopener noreferrer" target="_blank">网站性能优化工具大全</a></li>
<li><a href="http://www.alloyteam.com/2012/10/high-performance-html/" rel="noopener noreferrer" target="_blank">【高性能前端1】高性能HTML</a></li>
<li><a href="http://www.alloyteam.com/2012/10/high-performance-css/" rel="noopener noreferrer" target="_blank">【高性能前端2】高性能CSS</a></li>
<li><a href="http://coolshell.cn/articles/6470.html" rel="noopener noreferrer" target="_blank">由12306谈谈网站前端性能和后端性能优化</a></li>
<li><a href="http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/" rel="noopener noreferrer" target="_blank">AlloyTeam——前端优化</a></li>
<li><a href="http://www.cnblogs.com/developersupport/p/3248695.html" rel="noopener noreferrer" target="_blank">毫秒必争，前端网页性能最佳实践</a></li>
<li><a href="http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html" rel="noopener noreferrer" target="_blank">网站性能工具Yslow的使用方法</a></li>
<li><a href="http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1" rel="noopener noreferrer" target="_blank">前端工程与性能优化（上）：静态资源版本更新与缓存</a></li>
<li><a href="http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2" rel="noopener noreferrer" target="_blank">前端工程与性能优化（下）：静态资源管理与模板框架</a></li>
<li><a href="http://blog.jobbole.com/48369/" rel="noopener noreferrer" target="_blank">HTTPS连接的前几毫秒发生了什么</a></li>
<li><a href="http://uicss.cn/yslow/#more-12319" rel="noopener noreferrer" target="_blank">Yslow</a></li>
<li><a href="http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/" rel="noopener noreferrer" target="_blank">Essential Web Performance Metrics — A Primer, Part 1</a></li>
<li><a href="http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/" rel="noopener noreferrer" target="_blank">Essential Web Performance Metrics — Part 2</a></li>
<li><a href="http://jayli.github.io/blog/data/2011/12/23/yuislide.html" rel="noopener noreferrer" target="_blank">YUISlide,针对移动设备的动画性能优化</a></li>
<li><a href="http://joelglovier.com/improving-site-performance/" rel="noopener noreferrer" target="_blank">Improving Site Performance</a></li>
<li><a href="http://blog.segmentfault.com/laopopo/1190000000367899" rel="noopener noreferrer" target="_blank">让网站提速的最佳前端实践</a></li>
<li><a href="http://sixrevisions.com/web-development/why-website-speed-is-important/" rel="noopener noreferrer" target="_blank">Why Website Speed is Important</a></li>
<li><a href="http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/" rel="noopener noreferrer" target="_blank">Need for Speed – How to Improve your Website Performance</a></li>
<li><a href="https://github.com/amfe/article/issues/1" rel="noopener noreferrer" target="_blank">阿里无线前端性能优化指南 (Pt.1 加载期优化)</a></li>
</ol></li>
</ol><ol start="2">
<li>优化工具</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://www.html-js.com/article/3083" rel="noopener noreferrer" target="_blank">JavaScript 性能分析新工具 OneProfile</a></li>
<li><a href="http://www.html-js.com/article/3091" rel="noopener noreferrer" target="_blank">JavaScript 堆内存分析新工具 OneHeap</a></li>
</ol></li>
</ol><ol start="3">
<li>在线工具</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://developers.google.com/speed/pagespeed/insights/" rel="noopener noreferrer" target="_blank">google在线工具</a></li>
<li><a href="http://www.alibench.com/" rel="noopener noreferrer" target="_blank">阿里测</a></li>
<li><a href="http://itest.aliyun.com/" rel="noopener noreferrer" target="_blank">阿里-免费测试服务</a></li>
<li><a href="https://github.com/alibaba/f2etest" rel="noopener noreferrer" target="_blank">阿里-F2etest多浏览器兼容性测试解决方案</a></li>
<li><a href="http://jsperf.com/" rel="noopener noreferrer" target="_blank">js性能测试</a></li>
<li><a href="http://smallpdf.com/cn" rel="noopener noreferrer" target="_blank">轻松玩转PDF</a></li>
</ol></li>
</ol>
<h3 id="6639966e">七. 前端架构</h3>
<ul>
<li><a href="http://www.zhihu.com/topic/19612641" rel="noopener noreferrer" target="_blank">技术架构</a></li>
<li><a href="http://saito.im/note/The-Architecture-of-F2E/" rel="noopener noreferrer" target="_blank">前端架构</a></li>
<li><a href="http://www.zhihu.com/question/24092572" rel="noopener noreferrer" target="_blank">如何成为前端架构师</a></li>
<li><a href="http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html" rel="noopener noreferrer" target="_blank">关于前端架构-张克军</a></li>
<li><a href="http://www.zhihu.com/question/25583350" rel="noopener noreferrer" target="_blank">百度腾讯offer比较（腾讯游戏VS百度基础架构）</a></li>
</ul>
<p>&nbsp;</p>
<h3 id="08d581d7">八. iconfont</h3>
<ul>
<li><a href="http://www.zhihu.com/question/21253343" rel="noopener noreferrer" target="_blank">中文字体</a></li>
<li><a href="http://iconfont.cn/" rel="noopener noreferrer" target="_blank">淘宝字库</a></li>
<li><a href="http://ux.etao.com/fonts" rel="noopener noreferrer" target="_blank">字体</a></li>
<li><a href="http://iconfont.cn/help/platform.html" rel="noopener noreferrer" target="_blank">制作教程</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/?s=icomoon" rel="noopener noreferrer" target="_blank">zhangxinxu-icommon</a></li>
<li><a href="http://icomoon.io/app/" rel="noopener noreferrer" target="_blank">icommon</a></li>
<li><a href="http://imooc.com/learn/243" rel="noopener noreferrer" target="_blank">用字体在网页中画ICON图标(推荐教程)</a></li>
<li><a href="http://font-spider.org/" rel="noopener noreferrer" target="_blank">字体压缩工具</a>&nbsp;感谢初级群　[深圳-小鱼] 的推荐</li>
</ul>
<h3 id="c49550d7">九. 开发工具类</h3>
<ol>
<li>前端开发工具</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/judasn/IntelliJ-IDEA-Tutorial" rel="noopener noreferrer" target="_blank">IntelliJ IDEA 简体中文专题教程</a></li>
<li><a href="http://t.cn/8kZZ1Uy" rel="noopener noreferrer" target="_blank">Webstorm,InterllIdea,Phpstorm</a></li>
<li><a href="https://github.com/jikeytang/sublime-text" rel="noopener noreferrer" target="_blank">SublimeText</a></li>
<li><a href="https://atom.io/" rel="noopener noreferrer" target="_blank">Atom</a></li>
<li><a href="https://code.visualstudio.com/" rel="noopener noreferrer" target="_blank">visual studio code</a></li>
</ol></li>
</ol><ol start="2">
<li>Chrome, Firebug, Filddle 调试</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li>Fiddler</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="http://www.cnblogs.com/tugenhua0707/p/4623317.html" rel="noopener noreferrer" target="_blank">Fiddler调式使用知多少(一)深入研究</a></li>
<li><a href="http://www.cnblogs.com/strick/p/4570006.html" rel="noopener noreferrer" target="_blank">微信fiddle</a></li>
<li><a href="http://gaoboy.com/article/26.html" rel="noopener noreferrer" target="_blank">微信fiddle</a></li>
</ol></li>
</ol></li>
</ol><ol>
<li><ol start="2" data-lake-indent-new="1">
<li>Chrome</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="https://developer.chrome.com/devtools" rel="noopener noreferrer" target="_blank">Google Chrome 官方</a></li>
<li><a href="http://www.cnblogs.com/constantince/p/4565261.html" rel="noopener noreferrer" target="_blank">Chrome - 基础</a></li>
<li><a href="http://www.cnblogs.com/constantince/p/4579121.html" rel="noopener noreferrer" target="_blank">Chrome - 进阶</a></li>
<li><a href="http://www.cnblogs.com/constantince/p/4585983.html" rel="noopener noreferrer" target="_blank">Chrome - 性能</a></li>
<li><a href="http://www.cnblogs.com/constantince/p/4607497.html" rel="noopener noreferrer" target="_blank">Chrome - 性能进阶</a></li>
<li><a href="http://www.cnblogs.com/constantince/p/4624241.html" rel="noopener noreferrer" target="_blank">Chrome - 移动</a></li>
<li><a href="http://www.cnblogs.com/liyunhua/p/4544738.html" rel="noopener noreferrer" target="_blank">Chrome - 使用技巧</a></li>
<li><a href="http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html" rel="noopener noreferrer" target="_blank">Chrome - Console控制台不完全指南</a></li>
<li><a href="http://c7sky.com/chrome-devtools-workspace.html" rel="noopener noreferrer" target="_blank">Chrome - Workspace使浏览器变成IDE</a></li>
<li><a href="http://www.html-js.com/article/Nothing-blind%202975" rel="noopener noreferrer" target="_blank">network面板</a></li>
<li><a href="http://anti-code.com/devtools-cheatsheet/" rel="noopener noreferrer" target="_blank">chrome开发工具快捷键</a></li>
<li><a href="http://www.html-js.com/article/2327" rel="noopener noreferrer" target="_blank">chrome调试工具常用功能整理</a></li>
<li><a href="http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/" rel="noopener noreferrer" target="_blank">Chrome 开发工具 Workspace 使用</a></li>
<li><a href="http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html" rel="noopener noreferrer" target="_blank">Chrome神器Vimium快捷键学习记录</a></li>
<li><a href="http://www.w3cplus.com/sassguide/debug.html" rel="noopener noreferrer" target="_blank">sass调试-w3cplus</a></li>
<li><a href="http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html" rel="noopener noreferrer" target="_blank">如何更专业的使用Chrome开发者工具-w3cplus</a></li>
<li><a href="http://sentsin.com/web/253.html" rel="noopener noreferrer" target="_blank">chrome调试canvas</a></li>
<li><a href="https://developer.chrome.com/devtools/index" rel="noopener noreferrer" target="_blank">chrome profiles1</a></li>
<li><a href="http://h5dev.uc.cn/article-25-1.html" rel="noopener noreferrer" target="_blank">chrome profiles2</a></li>
<li><a href="http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles" rel="noopener noreferrer" target="_blank">chrome profiles3</a></li>
<li><a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation" rel="noopener noreferrer" target="_blank">chrome移动版调试</a></li>
<li><a href="http://ued.taobao.org/blog/?p=5534" rel="noopener noreferrer" target="_blank">chrome调试</a></li>
<li><a href="http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html" rel="noopener noreferrer" target="_blank">chrome的调试</a></li>
<li><a href="https://developers.google.com/chrome-developer-tools/docs/commandline-api" rel="noopener noreferrer" target="_blank">chrome console 命令详解</a></li>
<li><a href="http://www.cnblogs.com/leonkao/p/3809655.html" rel="noopener noreferrer" target="_blank">查看事件绑定1</a></li>
<li><a href="http://www.cnblogs.com/xiaoyao2011/p/3447421.html" rel="noopener noreferrer" target="_blank">查看事件绑定2</a></li>
<li><a href="http://segmentfault.com/blog/xuelang/1190000000683599" rel="noopener noreferrer" target="_blank">神器——Chrome开发者工具(一)</a></li>
<li><a href="https://xinranliu.me/2015-05-22-qiqu-performance/" rel="noopener noreferrer" target="_blank">奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)</a></li>
<li><a href="http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html" rel="noopener noreferrer" target="_blank">chrome 开发者工具的 15 个小技巧</a></li>
<li><a href="http://1ke.co/course/361" rel="noopener noreferrer" target="_blank">Chrome开发者工具不完全指南</a></li>
<li><a href="http://segmentfault.com/a/1190000003882567" rel="noopener noreferrer" target="_blank">Chrome 开发者工具使用技巧</a></li>
</ol></li>
</ol></li>
</ol><ol>
<li><ol start="3" data-lake-indent-new="1">
<li>Firebug</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="http://www.imooc.com/learn/137" rel="noopener noreferrer" target="_blank">firebug视频教程</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE" rel="noopener noreferrer" target="_blank">firefox 模拟器</a></li>
<li><a href="http://www.cnblogs.com/ctriphire/p/4116207.html" rel="noopener noreferrer" target="_blank">console.log 命令详解</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html" rel="noopener noreferrer" target="_blank">Firebug入门指南</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html" rel="noopener noreferrer" target="_blank">Firebug控制台详解</a></li>
<li></li>
</ol></li>
</ol></li>
</ol><ol>
<li><ol start="4" data-lake-indent-new="1">
<li>移动,微信调试</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/" rel="noopener noreferrer" target="_blank">微信调试的那些事</a></li>
<li><a href="http://blog.qqbrowser.cc/" rel="noopener noreferrer" target="_blank">微信调试官网</a></li>
<li><a href="http://blog.qqbrowser.cc/wei-xin-gong-zhong-hao-ben-di-diao-shi/" rel="noopener noreferrer" target="_blank">微信公众号本地调试</a></li>
<li><a href="http://bbs.mb.qq.com/thread-243399-1-1.html" rel="noopener noreferrer" target="_blank">微信、手Q、Qzone之x5内核inspect调试解决方案</a></li>
<li><a href="https://openstf.github.io/" rel="noopener noreferrer" target="_blank">浏览器端调试安卓</a></li>
<li><a href="http://yujiangshui.com/multidevice-frontend-debug/" rel="noopener noreferrer" target="_blank">移动端前端开发调试</a></li>
<li><a href="https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md" rel="noopener noreferrer" target="_blank">使用 Chrome 远程调试 Android 设备</a></li>
<li><a href="http://plus.uc.cn/document/webapp/doc5.html" rel="noopener noreferrer" target="_blank">mac移动端调试</a></li>
<li><a href="http://www.mihtool.com/" rel="noopener noreferrer" target="_blank">mac移动端调试</a></li>
<li><a href="http://thx.github.io/mobile/debugging-in-mobile/" rel="noopener noreferrer" target="_blank">无线调试攻略</a></li>
<li><a href="http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/" rel="noopener noreferrer" target="_blank">无线调试攻略</a></li>
<li><a href="http://www.jianshu.com/p/ccf124f1f74b" rel="noopener noreferrer" target="_blank">屌爆了,完美调试 微信webview(x5)</a></li>
<li><a href="http://jsconsole.com/" rel="noopener noreferrer" target="_blank">远程console</a></li>
<li><a href="http://blog.qqbrowser.cc/" rel="noopener noreferrer" target="_blank">微信调试工具</a></li>
<li><a href="https://github.com/jieyou/remote_inspect_web_on_real_device" rel="noopener noreferrer" target="_blank">各种真机远程调试方法汇总</a></li>
<li><a href="http://www.zhihu.com/question/37361845" rel="noopener noreferrer" target="_blank">手机测试自己写的web页面</a></li>
</ol></li>
</ol></li>
</ol><ol>
<li><ol start="5" data-lake-indent-new="1">
<li>iOS Simulator</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html" rel="noopener noreferrer" target="_blank">Simulator</a></li>
<li><a href="http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/" rel="noopener noreferrer" target="_blank">Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得</a></li>
</ol></li>
</ol></li>
</ol><ol start="3">
<li>img</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://preloaders.net/en/circular" rel="noopener noreferrer" target="_blank">loading img</a></li>
<li><a href="http://zhitu.isux.us/" rel="noopener noreferrer" target="_blank">智图-图片优化平台</a></li>
<li><a href="https://tinypng.com/" rel="noopener noreferrer" target="_blank">在线png优化</a></li>
</ol></li>
</ol><ol start="4">
<li>生成二维码</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://cli.im/" rel="noopener noreferrer" target="_blank">生成二维码</a></li>
</ol></li>
</ol><ol start="5">
<li>浏览器同步</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="https://github.com/leeluolee/puer" rel="noopener noreferrer" target="_blank">puer</a></li>
<li><a href="http://livereload.com/" rel="noopener noreferrer" target="_blank">liveReload</a></li>
<li><a href="http://getf5.com/" rel="noopener noreferrer" target="_blank">f5</a></li>
<li><a href="http://geek100.com/2608/" rel="noopener noreferrer" target="_blank">File Watchers</a></li>
</ol></li>
</ol><ol start="6">
<li>在线PPT制作</li>
</ol><ol>
<li><ol data-lake-indent-new="1">
<li><a href="http://js8.in/2013/11/16/%E6%8E%A8%E8%8D%90nodeppt%EF%BC%9A%E4%BD%BF%E7%94%A8markdown%E8%AF%AD%E6%B3%95%E6%9D%A5%E5%86%99%E7%BD%91%E9%A1%B5ppt/" rel="noopener noreferrer" target="_blank">nodePPT</a></li>
<li><a href="https://github.com/ksky521/nodePPT" rel="noopener noreferrer" target="_blank">PPT</a></li>
<li><a href="https://github.com/hakimel/reveal.js/" rel="noopener noreferrer" target="_blank">reveal</a></li>
<li><a href="https://github.com/Seldaek/slippy" rel="noopener noreferrer" target="_blank">slippy</a></li>
</ol></li>
</ol>
<h3 id="3cd371cc">十. 前端导航网站</h3>
<ul>
<li><a href="http://uxbees.com/index.html" rel="noopener noreferrer" target="_blank">界面清爽的前端导航</a></li>
<li><a href="http://whycss.com/" rel="noopener noreferrer" target="_blank">前端导航</a></li>
<li><a href="http://www.daqianduan.com/nav" rel="noopener noreferrer" target="_blank">前端网址导航</a></li>
<li><a href="http://sentsin.com/daohang/" rel="noopener noreferrer" target="_blank">前端名录</a></li>
<li><a href="http://123.jser.us/" rel="noopener noreferrer" target="_blank">前端导航</a></li>
<li><a href="http://www.css88.com/nav/" rel="noopener noreferrer" target="_blank">前端开发资源</a></li>
<li><a href="http://www.haourl.cn/" rel="noopener noreferrer" target="_blank">网址导航</a></li>
<li><a href="http://code.ciaoca.com/" rel="noopener noreferrer" target="_blank">前端开发仓库 - 众多效果的收集地</a></li>
<li><a href="https://github.com/jnoodle/f2e-collect" rel="noopener noreferrer" target="_blank">前端资源导航</a></li>
<li><a href="http://f2e.im/static/pages/nav/index.html" rel="noopener noreferrer" target="_blank">F2E 前端导航</a></li>
<li><a href="http://w3ctrain.github.io/" rel="noopener noreferrer" target="_blank">前端收藏夹</a></li>
<li><a href="http://doc.pfan123.com/" rel="noopener noreferrer" target="_blank">pFan 前端开发导航平台</a></li>
</ul>
<h3 id="b67fbcb9">十一. 常用CDN</h3>
<ul>
<li><a href="http://lib.sinaapp.com/" rel="noopener noreferrer" target="_blank">新浪CDN</a></li>
<li><a href="http://cdn.code.baidu.com/" rel="noopener noreferrer" target="_blank">百度静态资源公共库</a></li>
<li><a href="http://libs.useso.com/" rel="noopener noreferrer" target="_blank">360网站卫士常用前端公共库CDN服务</a></li>
<li><a href="http://www.bootcdn.cn/" rel="noopener noreferrer" target="_blank">Bootstrap中文网开源项目免费 CDN 服务</a></li>
<li><a href="http://staticfile.org/" rel="noopener noreferrer" target="_blank">开放静态文件 CDN - 七牛</a></li>
<li><a href="http://www.jq22.com/cdn" rel="noopener noreferrer" target="_blank">CDN加速 - jq22</a></li>
<li><a href="http://code.jquery.com/" rel="noopener noreferrer" target="_blank">jQuery CDN</a></li>
<li><a href="http://www.google-jquery-cdn.com/" rel="noopener noreferrer" target="_blank">Google jQuery CDN</a></li>
<li><a href="http://www.asp.net/ajax/cdn" rel="noopener noreferrer" target="_blank">微软CDN</a></li>
</ul>
<h3 id="114d516f">十二<span data-lake-element="cursor">. Git,SVN,Github</span></h3>
<ol>
<li><ol data-lake-indent-new="1">
<li>Git</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="http://git-scm.com/" rel="noopener noreferrer" target="_blank">git-scm</a></li>
<li><a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" rel="noopener noreferrer" target="_blank">廖雪峰-Git教程</a></li>
<li><a href="https://git-for-windows.github.io/" rel="noopener noreferrer" target="_blank">git-for-windows</a></li>
<li><a href="http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github/" rel="noopener noreferrer" target="_blank">GitHub 添加 SSH keys</a></li>
<li><a href="http://www.worldhello.net/gotgithub/index.html" rel="noopener noreferrer" target="_blank">gogithub</a></li>
<li><a href="http://pcottle.github.io/learnGitBranching/" rel="noopener noreferrer" target="_blank">git常规命令练习</a></li>
<li><a href="https://github.com/xirong/my-git" rel="noopener noreferrer" target="_blank">git的资料整理</a></li>
<li><a href="http://www.cnblogs.com/fanfan259/p/4810517.html" rel="noopener noreferrer" target="_blank">我所记录的git命令（非常实用）</a></li>
<li><a href="https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md" rel="noopener noreferrer" target="_blank">企业开发git工作流模式探索部分休整</a></li>
<li><a href="https://github.com/phodal/github-roam" rel="noopener noreferrer" target="_blank">GitHub 漫游指南</a></li>
<li><a href="https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md" rel="noopener noreferrer" target="_blank">GitHub秘籍</a></li>
<li><a href="http://livoras.com/post/28" rel="noopener noreferrer" target="_blank">使用git和github进行协同开发流程</a></li>
<li><a href="http://onlywei.github.io/explain-git-with-d3/" rel="noopener noreferrer" target="_blank">动画方式练习git</a></li>
<li><a href="http://www.imooc.com/learn/208" rel="noopener noreferrer" target="_blank">版本管理工具介绍—Git篇</a></li>
<li><a href="http://www.imooc.com/learn/390" rel="noopener noreferrer" target="_blank">版本控制入门 – 搬进 Github</a></li>
<li><a href="http://pcottle.github.io/learnGitBranching/?demo" rel="noopener noreferrer" target="_blank">Git动画演示</a></li>
</ol></li>
</ol></li>
</ol><ol>
<li><ol start="2" data-lake-indent-new="1">
<li>SVN</li>
</ol></li>
</ol><ol>
<li><ol>
<li><ol data-lake-indent-new="2">
<li><a href="http://www.imooc.com/learn/109" rel="noopener noreferrer" target="_blank">版本管理工具介绍---SVN篇</a></li>
</ol></li>
</ol></li>
</ol>
</div>
        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2020-04-30T12:12:23.825Z" itemprop="dateUpdated">2020-04-30 20:12:23</time>
</span><br>


        
        这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<a href="/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/" target="_blank" rel="external">http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/</a>
        
    </div>
    
    <footer>
        <a href="http://yoursite.com">
            <img src="/img/avatar.jpg" alt="Mr.Zhang">
            Mr.Zhang
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/" rel="tag">web</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/&title=《随笔| web资料整合》 — 一只咸鱼&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/&title=《随笔| web资料整合》 — 一只咸鱼&source=分享各种福利和姿势..." data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《随笔| web资料整合》 — 一只咸鱼&url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2020/05/18/cesium-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9D%90%E8%B4%A8%E6%B3%9B%E5%85%89%E9%9D%A2/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">cesium | 自定义材质泛光面</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2020/04/27/Vue-%E5%9F%BA%E4%BA%8EVue%E7%9A%84webGIS%E5%B1%95%E7%A4%BA/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">Vue|基于Vue的webGIS展示</h4>
      </a>
    </div>
  
</nav>



    




















</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢大爷~
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/img/wechat.jpg" data-alipay="/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循 <a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p><span>Mr.Zhang &copy; 2015 - 2020</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/&title=《随笔| web资料整合》 — 一只咸鱼&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/&title=《随笔| web资料整合》 — 一只咸鱼&source=分享各种福利和姿势..." data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《随笔| web资料整合》 — 一只咸鱼&url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=http://yoursite.com/2020/04/30/%E9%9A%8F%E7%AC%94-%E8%B5%84%E6%96%99%E6%95%B4%E5%90%88/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
